import React, { PureComponent, Fragment } from 'react';
import styles from "../MForm.less"
import { connect } from 'dva';
import { InputItem } from 'antd-mobile';
import MToast from "../../Util/MToast"
import { isNull } from "../../../utils/helper"
interface Props {
	value: any,
	onChange?: Function,
	label?: any,
	required?: any,
	show_label?: any,
	tips?: any,
	label_width?: any,
	hasError: boolean,
	errorMsg: string,
	label_text_color?: string,
	label_text_align?: any,
	count?: any,
	mapping?: object,
	disabled?: any,
	readonly?: any,
	allow_clear?: any
}
interface State {
	value: any
}
export default class MyRate extends PureComponent<Props, State> {
	timer = null;
	public state: State = {
		value: this.props.value
	}
	componentWillReceiveProps(nextProps: Props) {
		// Should be a controlled component.
		if ('value' in nextProps) {
			let value = nextProps.value;
			this.setState({
				value
			});
		}
	}

	changeValue = (value) => {
		if (!('value' in this.props)) {
			this.setState({
				value: value
			});
		}
		this.triggerChange(value);
	};

	triggerChange = (changedValue) => {
		const onChange = this.props.onChange;
		if (onChange) {
			onChange(changedValue);
		}
	};

	componentDidMount() {

	}
	onChange = (val?) => {
		let value = val;
		this.changeValue(value);
	};
	renderRateImg = (value) => {
		let { count, mapping = {}, disabled, readonly, allow_clear } = this.props;
		let isDisabled = disabled == 1;
		let isReadonly = readonly == 1;
		count = isNull(count) ? 5 : count * 1;
		let imgs = [];
		for (let i = 0; i < count; i++) {
			let imgSrc = "image/rate_no.png";
			if (!isNull(value)) {
				if ((i + 1) <= value) {
					imgSrc = "image/rate_yes.png";
				}
			}
			imgs.push(
				<img
					onClick={() => {
						if (isDisabled || isReadonly) {
							return;
						}
						if (allow_clear == 1 && (i + 1 == value)) {
							this.onChange()
						}
						else {
							this.onChange(i + 1);
						}
					}}
					key={i} style={{ width: "22px", marginRight: "10px" }} src={imgSrc} alt="" />
			)
		}
		imgs.push(<p key={-1}>{mapping[value]}</p>)
		return imgs;
	}
	render() {
		let { label, required, show_label, tips, label_width = 5, hasError, errorMsg, label_text_color, label_text_align = "left" } = this.props;

		let isShowLabel = isNull(show_label) || show_label == 1;
		let isRequired = required == 1;
		let { value } = this.state;
		let requiredClass = "am-list-item am-input-item am-list-item-middle mi-text mi-radio-group";
		if (isRequired) {
			requiredClass += " required"
		}
		if (hasError) {
			requiredClass += " am-input-error"
		}
		if (!isNull(label_text_align)) {
			requiredClass += " label-text-align-" + label_text_align
		}
		let labelClass = "am-input-label am-input-label-";
		if (isNull(label_width)) {
			labelClass += "3"
		}
		else {
			labelClass += label_width
		}
		return (
			<div>
				<div className={requiredClass} style={{ fontSize: "16px" }} data-flex="box:first">
					{
						isShowLabel ? <div className={labelClass} style={{ color: label_text_color }}>
							{label}
						</div> : <div></div>
					}
					<div style={{ color: "#888", paddingRight: "0" }} className="am-list-line" data-flex="dir:left box:last">
						<div data-flex=" cross:center">
							{this.renderRateImg(value)}

						</div>
						<div className="am-input-error-extra mi" onClick={(e) => {
							e.stopPropagation();
							MToast.info(errorMsg, 2, null, false)
						}} style={{ minWidth: "21px", width: "21px" }}
						/>
					</div>
				</div>
				{tips && <p className="tipsStyle">{tips}</p>}
			</div>
		)
	}
}
